// pages/ehaes/index.js
import * as echarts from '../../ec-canvas/echarts';
let chartLine;
 function initChart(xData, yData) {
  var that = this;
  var option = {
    grid: {
      containLabel: true
    },
    tooltip: {//重写图表提示内容
      show: true,
      trigger: 'axis',
      position: ['50%', '30%'],
      formatter: function(params) {
        return params[0].axisValue + ': ' + params[0].data + '元'
      }
    },
    xAxis: {
      type: 'category',
      data: xData,//异步请求的数据
      nameTextStyle: {
        fontSize: 20
      },
    },
    yAxis: {
      type: 'value',
      name: '元',
      axisLabel: {
        formatter: function(p) {//重写y坐标数值单位
          return p;
        }
      },
      nameTextStyle: {
        fontSize: 20
      }
    },
    series: [{
      data: yData,//异步请求的数据
      type: 'line',
      label: {
        show: true
      }
    }]
  };
  //echarts会继承父元素的宽高,所以我们一定要设置echarts组件父元素的高度。
  var myChart = that.ecComponent.init((canvas, width, height) => {
    const chart = echarts.init(canvas, null, {
      width: width,
      height: height,
    });
    //给echarts 设置数据及配置项（图表类型、数据量等）
    chart.setOption(option);
    return chart;
  });

}
function getOption(xData, data_cur, data_his) {
  var option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
    }]
};
  return option;
}
Page({

  /**
   * 页面的初始数据
   */
  data: {
   
    ecLine: {
      onInit: function (canvas, width, height){
          //初始化echarts元素，绑定到全局变量，方便更改数据
          chartLine = echarts.init(canvas, null, {
              width: width,
              height: height
          });
          canvas.setChart(chartLine);

          //可以先不setOption，等数据加载好后赋值，
          //不过那样没setOption前，echats元素是一片空白，体验不好，所有我先set。
          var xData = [1,2,3,4,5];  // x轴数据 自己写
          var option = getOption(xData);
          chartLine.setOption(option);
      },
      //  onInit: initChart
    }
  },
  

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.ecComponent =this.selectComponent('#mychart');
    // this.
  },
  /**设置图表映射 */

getOption: function() {
  var option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
    }]
};
   
  return option;
},

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})
  